<template>
  <div>
    <div class="title">
      <h6></h6>
      分支机构
    </div>
    <div class="content">
      <div class="table" v-if="list">
        <el-table
          :data="list"
          border
          highlight-current-row
          stripe
          :header-cell-style="{
            background: '#F1F5FF',
            color: '#4D4D4D'
          }"
        >
          >
          <el-table-column prop="num" label="序号" fixed width="80" align="center">
          </el-table-column>
          <el-table-column prop="name" label="分支机构名称" min-width="10%" align="center" fixed>
            <template slot-scope="scope">{{ scope.row.name | getData }}</template>
          </el-table-column>
          <el-table-column prop="opername" label="负责人" min-width="6%" align="center">
            <template slot-scope="scope">{{ scope.row.opername | getData }}</template>
          </el-table-column>
          <el-table-column prop="startdate" label="成立日期" min-width="5%" align="center">
            <template slot-scope="scope">{{ scope.row.startdate | getData }}</template>
          </el-table-column>

          <el-table-column prop="status" label="经营状态" min-width="10%" align="center">
            <template slot-scope="scope"> {{ scope.row.status | getStatus }}</template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination" v-if="list">
        <el-pagination
          background
          layout="prev, pager, next"
          @next-click="nextClick()"
          @prev-click="prevClick()"
          @current-change="handlePageChange"
          :total="pages * 10"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { myPostFetch } from '@/api/report'
export default {
  props: {
    name: String
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      pages: 1,
      list: null
    }
  },
  // 过滤器
  filters: {
    getStatus: function (value) {
      if (value == 1) return '存续'
      if (value == 2) return '注销'
      if (value == 3) return '吊销'
      if (value == 4) return '撤销'
      if (value == 5) return '迁出'
      if (value == 6) return '设立中'
      if (value == 7) return '清算中'
      if (value == 8) return '停业'
      if (value == 9) return '其他'
      if (value == 11) return '歇业'
      if (value == 12) return '责令关闭'
      if (value == 13) return '已取缔非法社会组织'
      if (value == 14) return '涉嫌非法社会组织'
      return value
    },
    getData: function (value) {
      if (value) return value
      let date = '-'
      return date
    }
  },
  mounted() {
    this.findkjapply()
  },
  methods: {
    // 获取信息
    async findkjapply() {
      let url = '/credit/getBranchs'
      let params = {
        name: this.name,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        pages: 1
      }
      let data = await myPostFetch(url, params)
      if (data.code == 500) return (this.list = [])
      this.list = data.rows
      for (let i = 0; i < this.list.length; i++) {
        this.list[i].num = (this.pageNum - 1) * 10 + i + 1
      }
      this.pages = Math.ceil(data.total / this.pageSize)
    },
    //点击下一页
    nextClick() {
      this.pageNum += 1
      this.findkjapply()
    },
    //点击上一页
    prevClick() {
      this.pageNum -= 1
      this.findkjapply()
    },
    //点击数字改变page的值
    handlePageChange(currentPage) {
      this.pageNum = currentPage
      this.findkjapply()
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}
.title {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 0.0938rem;
  font-weight: bold;
  color: #333333;
  margin: 0.1302rem 0;
  h6 {
    width: 0.026rem;
    height: 0.0938rem;
    background-color: #0a7be0;
    margin-right: 0.0521rem;
  }
  .content {
    position: relative;
    box-sizing: border-box;
    background: #ffffff;
    // 表格
    .table {
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      height: 100%;
      margin-bottom: 0.1042rem;
      cursor: pointer;
      overflow: auto;
      .span {
        display: inline-block;
        // width: 0.1563px;
        // height: 0.125px;
        font-size: 0.0781rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        margin-right: 0.026rem;
        color: #ccc;
        border-bottom: 0.0052rem solid #ccc;
        cursor: pointer;
        margin-right: 0.0521rem;
      }
      .span1 {
        display: inline-block;
        font-size: 0.0781rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        margin-right: 0.026rem;
        color: #3f6ef2;
        border-bottom: 0.0052rem solid #3f6ef2;
        cursor: pointer;
      }
      .nactive {
        font-size: 0.0729rem;
        margin-right: 0.026rem;
        color: #3f6ef2;
        border-bottom: 0.0052rem solid #3f6ef2;
      }
      .state-bar {
        span {
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #606266;
          margin-right: 0.0521rem;
        }
      }
    }
    // 分页器
    .pagination {
      display: flex;
      padding: 0.1042rem 0.1563rem 0.0521rem 0.0521rem;
      justify-content: right;
      position: absolute;
      bottom: 0.2083rem;
      right: 0.1042rem;
      span {
        font-size: 0.0833rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #666666;
        margin-top: 0.0104rem;
      }
    }
  }
}
::v-deep .el-table th.el-table__cell > .cell {
  text-align: center;
}
// 表格样式
::v-deep .el-table th.el-table__cell > .cell {
  font-size: 0.0833rem;
}
::v-deep.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.0781rem;
  font-size: 0.0833rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
}
/* 表格 */
::v-deep .el-table {
  th.el-table__cell > .cell {
    font-size: 0.0781rem;
    font-weight: 400;
  }
  .cell {
    font-size: 0.0781rem;
  }
  .el-table__body-wrapper {
    overflow: auto;
    height: calc(100% - 85px);
    &::-webkit-scrollbar {
      width: 0; /* 纵向滚动条 宽度 */
      height: 0.0781rem; /* 横向滚动条 高度 */
    }
    &::-webkit-scrollbar-thumb {
      width: 0.0521rem; /* 横向滚动条 宽度 */
      height: 0.0781rem; /* 纵向滚动条 高度 */
      background-color: rgb(167, 164, 164);
    }
  }
}
</style>
<style lang="scss">
/* 分页器 */
.el-pagination.is-background .el-pager li {
  border-radius: 0.1042rem;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3f6ef2;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: transparent;
}

.el-table tr {
  height: 0.2083rem;
}
.el-table .el-table thead {
  height: 0.2083rem;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3f6ef2;
}
</style>
